<template>
	<BaseTip text="此页面用于检查i18n完整性;" />
	<BaseTip text="缺失的项用黄色背景标注;" />
	<BaseTip text="表格为可编辑状态方便复制;" />
	<table class="w-full table-fixed text-t-1">
		<thead>
			<tr class="bg-bg-2 app-bg-react sticky top-0">
				<td>All keys {{ allKeys.length }}</td>
				<td v-for="(val, lang) in data" :key="lang">
					{{ lang }} {{ Object.keys(val).length }} -- {{ allKeys.length - Object.keys(val).length }}
				</td>
			</tr>
		</thead>
		<tbody>
			<tr v-for="key in allKeys" :key="key" class="odd:bg-border-1 app-bg-react">
				<td contenteditable="true">{{ key }}</td>
				<td contenteditable="true" class="empty:bg-warning">{{ data.en?.[key] }}</td>
				<td contenteditable="true" class="empty:bg-warning">{{ data.zh?.[key] }}</td>
				<td contenteditable="true" class="empty:bg-warning">{{ data.zhTW?.[key] }}</td>
			</tr>
		</tbody>
	</table>
</template>

<script setup lang="ts">
import { fromPairs, isObject, map, transform } from 'lodash-es'
import { messages } from '@/i18n'
import { BaseTip } from '@/components/base'

const flattenObject = (obj: any, parentKey = '') =>
	transform(
		obj,
		(result, value, key: string) => {
			const fullKey = parentKey ? `${parentKey}.${key}` : key
			if (isObject(value) && !Array.isArray(value)) {
				Object.assign(result, flattenObject(value, fullKey))
			} else {
				result[fullKey] = value
			}
		},
		{} as any
	)
const data = fromPairs(map(messages, (item, key) => [key, flattenObject(item)]))
const allKeys = Object.keys(Object.assign({}, ...Object.values(data)))
console.debug(data)
console.debug(allKeys)
</script>

<style scoped></style>
